﻿<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="TravelStar - Tour, Travel, Travel Agency Template">
    <meta name="keywords" content="Tour, Travel, Travel Agency Template">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TravelStar - Tour, Travel & Travel Agency Template</title>


    <!-- Favi icon -->
    <link rel="shortcut icon" type="image/x-icon" href="../static/images/favicon.ico">
    <!-- bootstrap v3.3.6 css -->
    <link rel="stylesheet" href="../static/css/assets/bootstrap.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="../static/css/assets/animate.css">
    <!-- Button Hover animate css -->
    <link rel="stylesheet" href="../static/css/assets/hover-min.css">
    <!-- jquery-ui.min css -->
    <link rel="stylesheet" href="../static/css/assets/jquery-ui.min.css">
    <!-- meanmenu css -->
    <link rel="stylesheet" href="../static/css/assets/meanmenu.min.css">
    <!-- owl.carousel css -->
    <link rel="stylesheet" href="../static/css/assets/owl.carousel.min.css">
    <!-- slick css -->
    <link rel="stylesheet" href="../static/css/assets/slick.css">
    <!-- chosen.min-->
    <link rel="stylesheet" href="../static/css/assets/jquery-customselect.css">
    <!-- font-awesome css -->
    <link rel="stylesheet" href="../static/css/assets/font-awesome.min.css">
    <!-- magnific Css -->
    <link rel="stylesheet" href="../static/css/assets/magnific-popup.css">
    <!-- Preloader css -->
    <link rel="stylesheet" href="../static/css/assets/preloader.css">
    <!-- custome css -->
    <link rel="stylesheet" href="../static/css/style.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="../static/css/responsive.css">
    <link rel="stylesheet" href="../static/css/master.css">

	<!-- 点选 css -->
    <link rel="stylesheet" href="../static/css/paopao/style_paopao.css">


</head>
<body>   
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>

<!-- header area start here -->
<!-- 固定头部，不要动 -->
<header>
    <div class="main_nav">
        <div class="container">
            <div class="row">
                <div class="col-md-2 col-sm-2 col-xs-12 tap-v-responsive">
                    <div class="logo-area">
                        <a href="index.html"><img src="images/logo.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="col-md-10">
                    <nav>
                        <ul class="main-menu text-right">
                            <li class="active"><a href="{{url_for('mainpage')}}">主页</a></li>
							
							<li><a href="{{url_for('personinfor')}}">智能推荐</a></li>
							
                            <li><a href="{{url_for('Recommend')}}">精准推荐</a></li>
                         
                            <li><a href="{{url_for('Wish_list')}}">心愿清单</a></li>
							
                            <li><a href="{{url_for('luxian')}}">我的路线</a></li>
							
                            <li><a href="{{url_for('contact')}}">电子导游</a></li>
                        </ul>
                    </nav>
                </div> <!-- main menu end here -->
            </div>
        </div>
    </div> <!-- header-bottom area end here -->
</header> <!-- header area end here -->

{%if alert==1%}
<div class="alert alert-warning alert-dismissible" style="margin:0;" role="alert">
  <button type="button"  class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请选择完整信息！
</div>
{%endif%}
    <!-- blog breadcrumb version one strat here -->
    <section class="breadcrumb-blog-version-one">
        <div class="single-bredcurms" style="background-image:url('../static/images/bercums/Hotels-Version-02.jpg');">
         <div class="container">
             <div class="row">
                 <div class="col-sm-12">
                   <div class="bredcrums-content">
                   <h2>精准推荐</h2>
                   <ul>
                    <li><a href="index.html">我们需要更多信息，以达到更精准的推荐</a></li>
                </ul>
                </div>
                 </div>
             </div>
         </div>
        </div>
    </section><!-- blog breadcrumb version one end here -->

<!-- 开始选择旅游信息-->
<form action="{{ url_for('Recommend') }}" method="POST">
    <section class="blog_wrapper">
    <div class="container">
        <div class="row">
            <div id="new_box">
                <div class="new_con">
                    <div class="newtel">
                        <ul class="new_telst">
                            <li class="">出行时间</li>
                            <li class="newon">预期开销</li>
                            <li class="">景点风格</li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="new-wrap">
                        <!--案例1-->
                        <div class="new_lst show" style="display: none;">
                            <ul class="new_lst_cn">
                                <li class="new_cnlf">
                                    <p class="newlf_img">
                                        <img src="../static/images/new_img1.jpg" width="300" height="240">
                                    </p>
                                    <p class="newlf_tel"> 放假了	</p>
                                    <p class="newlf_tx"> 狂欢派对嗨起来</p>
                                </li>
                                <li class="new_cnrf">
                                    <div class='selector'>
                                        <ul>
                                            <li>
                                              <input id='1' value="1" type='radio' name="time">
                                              <label for='1'>1天</label>
                                            </li>
                                            <li>
                                              <input id='2' value="2" type='radio' name="time">
                                              <label for='2'>2天</label>
                                            </li>
                                            <li>
                                              <input id='3' value="3" type='radio' name="time">
                                              <label for='3'>3天</label>
                                            </li>
                                            <li>
                                              <input id='4' value="4" type='radio' name="time">
                                              <label for='4'>4天</label>
                                            </li>
                                            <li>
                                              <input id='5' value="5" type='radio' name="time">
                                              <label for='5'>5天</label>
                                            </li>
                                        </ul>
                                        <button type="button">单选</button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--案例2-->
                        <div class="new_lst" style="display: block;">
                            <ul class="new_lst_cn">
                                <li class="new_cnlf">
                                    <p class="newlf_img">
                                        <img src="../static/images/new_img1.jpg" width="300" height="240">
                                    </p>
                                    <p class="newlf_tel"> 放假了	</p>
                                    <p class="newlf_tx">狂欢派对嗨起来</p>
                                </li>
                                <li class="new_cnrf">
                                    <div class='selector'>
                                        <ul>
                                            <li>
                                              <input id='7' type='radio' name="money">
                                              <label for='7'>500</label>
                                            </li>
                                            <li>
                                              <input id='8' type='radio' name="money">
                                              <label for='8'>1200</label>
                                            </li>
                                            <li>
                                              <input id='9' type='radio' name="money">
                                              <label for='9'>2000</label>
                                            </li>
                                            <li>
                                              <input id='10' type='radio' name="money">
                                              <label for='10'>3500</label>
                                            </li>
                                            <li>
                                              <input id='11' type='radio' name="money">
                                              <label for='11'>5000</label>
                                            </li>
                                            <li>
                                              <input id='12' type='radio' name="money">
                                              <label for='12'>7000</label>
                                            </li>
                                            <li>
                                              <input id='13' type='radio' name="money">
                                              <label for='13'>8500</label>
                                            </li>
                                            <li>
                                              <input id='14' type='radio' name="money">
                                              <label for='14'>10000</label>
                                            </li>
                                        </ul>
                                        <button type="button">单选</button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--案例3-->
                        <div class="new_lst" style="display: none;">
                            <h3 style="text-align: center;font-weight:300; font-style: inherit">请选择2-4个类型</h3>
                            <ul class="new_lst_cn">
                                <li class="new_cnlf">
                                    <p class="newlf_img">
                                        <img src="../static/images/new_img1.jpg" width="300" height="240">
                                    </p>
                                    <p class="newlf_tel" > 放假了</p>
                                    <p class="newlf_tx">狂欢派对嗨起来</p>
                                </li>
                                <li class="new_cnrf">
                                    <div class='selector'>

                                        <ul>
                                            <li>
                                              <input id='15' name='type' value="民居" type='checkbox'>
                                              <label for='15'>民居</label>
                                            </li>
                                            <li>
                                              <input id='16' name='type' value="亭台楼阁" type='checkbox'>
                                              <label for='16'>亭台楼阁</label>
                                            </li>
                                            <li>
                                              <input id='17' name='type'  value="园林" type='checkbox'>
                                              <label for='17'>园林</label>
                                            </li>
                                            <li>
                                              <input id='18' name='type'  value="历史遗迹" type='checkbox'>
                                              <label for='18'>历史遗迹</label>
                                            </li>
                                            <li>
                                              <input id='19' name='type'  value="游乐场" type='checkbox'>
                                              <label for='19'>游乐场</label>
                                            </li>
                                            <li>
                                              <input id='20' name='type'   value="艺术" type='checkbox'>
                                              <label for='20'>艺术</label>
                                            </li>
                                            <li>
                                              <input id='21' name='type'  value="现代建筑" type='checkbox'>
                                              <label for='21'>现代建筑</label>
                                            </li>
                                            <li>
                                              <input id='22' name='type'   value="寺庙" type='checkbox'>
                                              <label for='22'>寺庙</label>
                                            </li>
                                             <li>
                                              <input id='23' name='type'  value="大学" type='checkbox'>
                                              <label for='23'>大学</label>
                                            </li>
                                            <li>
                                              <input id='24' name='type'  value="购物" type='checkbox'>
                                              <label for='24'>购物</label>
                                            </li>
                                             <li>
                                              <input id='25' name='type'  value="峡谷" type='checkbox'>
                                              <label for='25'>峡谷</label>
                                            </li>
                                            <li>
                                              <input id='26' name='type'  value="瀑布" type='checkbox'>
                                              <label for='26'>瀑布</label>
                                            </li>
                                        </ul>
                                        <button type="button">多选</button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <hr>
            </div>
            <button style="font-weight:300; font-style: inherit" class="btn btn-primary btn-block"type="submit">一键生成</button>
        </div>
    </div>
</section>
</form>




    <!-- Scroll to top-->
    <!-- ============================
            JavaScript Files
    ============================= -->
	<script src="../static/js/vendor/jquery-3.2.0.min.js"></script>

	<script type="text/javascript">           
	$(document).ready(function(){
		//设计案例切换
		$('.new_telst li').mouseover(function(){
			var liindex = $('.new_telst li').index(this);
			$(this).addClass('newon').siblings().removeClass('newon');
			$('.new-wrap div.new_lst').eq(liindex).fadeIn(150).siblings('div.new_lst').hide();
			var liWidth = $('.new_telst li').width();
			$('.newtel .n6ew_telst p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
		});
		
	});
	</script>


    <!-- 泡泡图js-->
	<script type="text/javascript">
	var angleStart = -360;

	// jquery rotate animation
    //负责泡泡旋转
	function rotate(li,d) {
		$({d:angleStart}).animate({d:d}, {
			step: function(now) {
				$(li)
				   .css({ transform: 'rotate('+now+'deg)' })
				   .find('label')
					  .css({ transform: 'rotate('+(-now)+'deg)' });
			}, duration: 0
		});
	}

	// show / hide the options
    //jQuery 多选框架
	function toggleOptions(s) {
		$(s).toggleClass('open');
		var li = $(s).find('li');
		var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
		for(var i=0; i<li.length; i++) {
			var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
			$(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
		}
	}

	$('.selector button').click(function(e) {
		toggleOptions($(this).parent());
	});

	setTimeout(function() { toggleOptions('.selector'); }, 100);

	</script>	

    <!-- jquery latest version -->

    <script src="../static/js/vendor/modernizr-2.8.3.min.js"></script>
    <!-- bootstrap js1 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <!-- owl.carousel js1 -->
    <script src="../static/js/owl.carousel.min.js"></script>
    <!-- slick js1 -->
    <script src="../static/js/slick.min.js"></script>
    <!-- meanmenu js1 -->
    <script src="../static/js/jquery.meanmenu.min.js"></script>
    <!-- jquery-ui js1 -->
    <script src="../static/js/jquery-ui.min.js"></script>
    <!-- wow js1 -->
    <script src="../static/js/wow.min.js"></script>
    <!-- counter js1 -->
    <script src="../static/js/jquery.counterup.min.js"></script>
    <!-- Countdown js1 -->
    <script src="../static/js/jquery.countdown.min.js"></script>
    <!-- waypoints js1 -->
    <script src="../static/js/jquery.waypoints.min.js"></script>
    <!-- Isotope js1 -->
    <script src="../static/js/isotope.pkgd.min.js"></script>
    <!-- magnific js1 -->
    <script src="../static/js/jquery.magnific-popup.min.js"></script>
    <!-- Image loaded js1 -->
    <script src="../static/js/imagesloaded.pkgd.min.js"></script>
    <!-- chossen js1 -->
    <script src="../static/js/chosen.jquery.min.js"></script>
    <!-- Jquery plugin -->
    <script src="../static/js/plugins.js"></script>
    <!-- select2 js1 plugin -->
    <script src="../static/js/select2.min.js"></script>
    <script src="../static/js/colors.js"></script>
    <!-- Jquery plugin -->
    <script src="../static/js/jquery-customselect.js"></script>
    <!-- main js1 -->
    <script src="../static/js/custom.js"></script>
</body>
</html>
